<template>
  <div>
    <van-tabbar :fixed="true" :safe-area-inset-bottom="true" v-model="active">
      <van-tabbar-item
        v-for="(item, k) in bns"
        :key="k"
        :icon="item.icon"
        @click="navigate(item.path)"
      >
        {{ item.name }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { bus } from '@/main.js';
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'bottomNav',
  mixins: [], //混入
  components: {}, //组件
  props: {}, //集成属性
  data() {
    return {
      active: -1,
      bns: [
        {
          icon: 'wap-home-o',
          name: '首页',
          path: 'index',
        },
        {
          icon: 'menu',
          name: '订单',
          path: 'order',
        },
        {
          icon: 'user',
          name: '我的',
          path: 'myself',
        },
        {
          icon: 'visiting-person',
          name: '公会',
          path: 'guild',
        },
      ],
    };
  },
  computed: {
    ...mapState([]),
  },
  methods: {
    ...mapMutations([]),
    test: function() {
      console.log('test');
    },
    setActiveRoute(path) {
      let arr = this.$route.path.split('/');
      let idx = this.bns.findIndex((item) => {
        return item.path === arr[1];
      });
      this.active = idx;
    },
    navigate(path) {
      this.$router.push(path);
    },
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    this.setActiveRoute();
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
};
</script>
<style lang="less" scoped>
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.nav-item {
  flex: 1;
  text-align: center;
  padding: 10px;
}

.nav-item.action {
  background-color: red;
  font-weight: bold;
}

.nav-item a {
  text-decoration: none;
  color: inherit;
}
</style>
